<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8">
    <title>Hello_React</title>
</head>

<body>
    <!-- 准备好一个容器  div在html中表示一个块，英文为division -->
    <div id = 'test' ></div>

    <!-- 引入有顺序，此为react核心库包 -->
    <script type="text/javascript" src="../js/react.development.js" ></script>
    <!-- 此为react的核心扩展包 -->
    <script type="text/javascript" src="../js/react-dom.development.js" ></script>
    <!-- 用于转换jsx 到 js -->
    <script type="text/javascript" src="../js/babel.min.js" ></script>
    
    <!-- 这里的type需要是babel，默认是javascript -->
    <script type="text/babel" >
        // 创建虚拟DOM
        const VDOM = <h1>Hello, react</h1>
        // 渲染虚拟DOM到页面，第一个参数虚拟Dom，第二个参数是dom的id
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>